import React from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

export default function Setup() {
    const navigate = useNavigate()
    const token = localStorage.getItem('Token')
    const back = () => {
        navigate('/app/my')
    }

    const handlerTui=()=>{
        localStorage.removeItem('accessToken')
        localStorage.removeItem('refreshToken')
        navigate('/login')
    }
    return (
        <div>
            <NavBar onBack={back}>
                <h3>设置</h3>
            </NavBar>
            <hr />
            <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', height: '60px', alignItems: 'center', borderBottom: '1px solid #eee' }}>
                    <p style={{ marginLeft: '20px' }}>实名认证</p>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <p style={{ marginRight: '15px' }}>{token ? '已认证' : '未认证'}</p>
                        <img onClick={() => { navigate('/ren') }} style={{ width: '10px', height: '10px', marginRight: '10px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                    </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', height: '60px', alignItems: 'center', borderBottom: '1px solid #eee' }}>
                    <p style={{ marginLeft: '20px' }}>账号安全</p>
                    <img onClick={() => { navigate('/secure') }} style={{ width: '10px', height: '10px', marginRight: '10px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', height: '60px', alignItems: 'center', borderBottom: '10px solid #eee' }}>
                    <p style={{ marginLeft: '20px' }}>微信绑定</p>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <p style={{ marginRight: '15px' }}>已绑定</p>
                        <img style={{ width: '10px', height: '10px', marginRight: '10px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                    </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', height: '60px', alignItems: 'center', borderBottom: '1px solid #eee' }}>
                    <p style={{ marginLeft: '20px' }}>关于我们</p>
                    <img onClick={() => { navigate('/gywm') }} style={{ width: '10px', height: '10px', marginRight: '10px' }} src='https://cdn8.axureshop.com/demo2024/2322481/images/%E5%BA%97%E9%93%BA%E8%AF%A6%E6%83%85/u1754.svg' />
                </div>
            </div>
            <button onClick={() => { handlerTui() }} style={{ width: '300px', height: '45px', position: 'absolute', bottom: '20px', left: '70px', borderRadius: '20px', background: 'linear-gradient(to right, rgb(237, 195, 145),rgb(244, 171, 87))', color: 'white', border: '0px', fontSize: '15px' }}>退出登录</button>
        </div>
    )
}